<div *ngIf="!!popup && popup.isShowing" [class]="popup.cssRoot" [style.width]="popup.renderedWidth" [style.maxWidth]="popup.renderedWidth" (scroll)="popup.onScroll()">
  <div [class]="popup.cssRootContent">
    <div [class]="getHeaderCss()">
      <div *ngIf="popup.isCollapsed && !!popup.locTitle" [class]="popup.cssHeaderTitleCollapsed">
        {{popup.locTitle.renderedHtml}}
      </div>
      <div [class]="popup.cssHeaderButtonsContainer">
        <div *ngIf="popup.allowFullScreen" [class]="popup.cssHeaderFullScreenButton" (click)="popup.toggleFullScreen()">
          <svg *ngIf="popup.isFullScreen" [iconName]="'icon-back-to-panel_16x16'" [size]="16" sv-ng-svg-icon></svg>
          <svg *ngIf="!popup.isFullScreen" [iconName]="'icon-full-screen_16x16'" [size]="16" sv-ng-svg-icon></svg>
        </div>

        <div [class]="popup.cssHeaderCollapseButton" (click)="popup.changeExpandCollapse()">
            <svg *ngIf="popup.isExpanded" [iconName]="'icon-minimize_16x16'" [size]="16" sv-ng-svg-icon></svg>
            <svg *ngIf="popup.isCollapsed" [iconName]="'icon-restore_16x16'" [size]="16" sv-ng-svg-icon></svg>
        </div>

        <div *ngIf="popup.allowClose" [class]="popup.cssHeaderCloseButton" (click)="closeHandler()">
          <svg [iconName]="'icon-close_16x16'" [size]="16" sv-ng-svg-icon></svg>
        </div>
      </div>
  </div>
  <div [class]="popup.cssBody">
    <survey [model]="popup.survey"></survey>
  </div>
  </div>
</div>